<template>
  <el-input
    :name="name"
    :value="currentValue"
    :placeholder="placeholder ? placeholder : label"
    :type="type ? type : 'text'"
    :rows="type === 'textarea' ? areaLength : null"
    :maxlength="maxlength ? maxlength : null"
    :disabled="disabled"
    :show-password="type === 'password'"
    @input="onInputEvent"
  />
</template>

<script>
export default {
  name: 'TextInput',
  // eslint-disable-next-line vue/require-prop-types
  props: ['placeholder', 'label', 'type', 'name', 'value', 'disabled', 'maxlength', 'areaLength'],
  data() {
    return {
      currentValue: this.value
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    }
  },
  created() {
    this.currentValue = this.value
  },
  methods: {
    onInputEvent(value) {
      this.$emit('input', this.name, this.type === 'number' ? Number(value) : value)
    }
  }
}
</script>

<style>
.el-input.is-disabled .el-input__inner {
  color: #606266 !important;
}
</style>
